<script setup lang="ts">
import { ref } from 'vue'
import SvgIcon from '@/components/SvgIcon.vue'
import SystemSetting from '@/views/setting/SystemSetting.vue'
import openai from '@/assets/icon/model/openai.svg'
import github from '@/assets/icon/github.svg'
import setting from '@/assets/icon/setting.svg'

const systemSettingRef: any = ref(null)

const openSystemSetting = () => {
  systemSettingRef.value.openDialog()
}
</script>

<template>
  <div>
    <div class="header">
      <div class="current-model left">
        <SvgIcon :tooltipDisabled="true"
                 :imgSrc="openai"
                 icon-size="26px"
        />
        LIKEGAKKI-BOT
      </div>
      <div class="header-content">
        <!-- 其他头部内容 -->
      </div>
      <div class="header-icons right">
        <div @click="openSystemSetting">
          <SvgIcon tooltipContent="修改设置"
                   :imgSrc="setting"
                   icon-size="26px"
                   placement="bottom"
          />
        </div>
        <SvgIcon tooltipContent="访问Github"
                 :imgSrc="github"
                 icon-size="26px"
                 placement="bottom" />
      </div>
    </div>
    <SystemSetting ref="systemSettingRef" />
  </div>
</template>
<style lang="less" scoped>
@padding-size: 5px 30px;
@icon-gap: 25px;

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  flex-grow: 1; // 使内容区域占据中间的最大空间
  text-align: center; // 可以让文本居中显示
}

.current-model {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;

  .model-icon {

    img {
      width: 30px;
      height: 30px;
    }
  }
}

.header-icons {
  display: flex;
  gap: @icon-gap;

  &.left, &.right {
    display: flex;
  }
}
</style>

